import Card from 'components/CodeCard'
import { View } from '@tarojs/components'
import Demo01 from './demo01'
import md_tsx from './demo01/md_tsx.md'
import md_css from './demo01/md_css.md'
import s from './index.module.scss'

import Demo02 from './demo02'
import md_tsx2 from './demo02/md_tsx.md'
import md_css2 from './demo02/md_css.md'

const tabs1 = [{
  filename: 'tsx',
  code: () => (
    <wemark md={md_tsx} link highlight type='wemark' />
  )
}, {
  filename: 'scss',
  code: () => (
    <wemark md={md_css} link highlight type='wemark' />
  )
}]

const tabs2 = [{
  filename: 'tsx',
  code: () => (
    <wemark md={md_tsx2} link highlight type='wemark' />
  )
}, {
  filename: 'scss',
  code: () => (
    <wemark md={md_css2} link highlight type='wemark' />
  )
}]

export default function Index() {
  return (
    <View className={s.wrapper}>
      <Card
        title='View 纵向排列'
        desc='在文档流中，View 默认为一个块元素，默认从上到下排列，独占一行，宽度自适应为父级宽度，高度由内容撑开'
        codeTabs={tabs1}
      >
        <Demo01 />
      </Card>

      <Card
        title='View 横向排列'
        desc='我们可以使用 flex 布局，来做到横向布局'
        codeTabs={tabs2}
      >
        <Demo02 />
      </Card>
    </View>
  )
}